Freebie: “Cardio” One Page Website Template

A clean and modern one page website template built with Bootstrap. The responsive HTML template has a gym related theme but can be easily fitted to any kind of content.

By in Freebies on
Demo

Today we are very happy to share a clean and versatile one page website template with you.

Cardio is a clean and modern looking, responsive one page website template built with Bootstrap. It has a gym related theme but it can be easily adjusted to fit well with any kind of topic. The template comes with a smooth page navigation and some subtle transition effects. The design is very clean and spacious with a fresh color theme and solid typography.

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version 10+
  • SafariSupported
  • OperaSupported

Cardio_Preview

About the website template

The responsive template is built with the help of the following resources:

Preview

Have a look at the whole template design:

Cardio_PreviewFull

Check out the live demo of the template: Cardio Live Preview

Download

Download the template for free:

You can download the ZIP file here:

Use it freely but please don’t republish, redistribute or sell “as-is”.

We hope you enjoy this freebie and find it useful!

Check out the Behance project page where you will also find a link to download the PSD file!

If you’d like to contribute and publish your freebie on Codrops just drop us a line.

PHI RHYTHMUS

We're brothers in arms. Our names are Filip and Luka. We like to work on impossible projects, and fight unreal deadlines. "Stop existing and start living!"

Image Trail Animation for an Intro

Repetition Image Hover Effects

Making CSS View Transitions Easy with Velvette

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 54

Comments are closed.

  1. A beautiful template, thank you! Thinking quite hard to find a suitable use case to use it.

  4. Beautifully designed, coded and developed. You have set the bar for quality, very high.

  6. Thank you so much for the template. Unbelievable, that it’s free to use and download! Thanks again!

  8. Great Job. Can you please fix the problem in the opening google speed is ranking it 59 / 100 Speed becaouse of preloading animation

  11. Outstanding template! The pages are alive with color and flow. Good work guys!

  14. Best and most informative site on the net. Thanks for sharing. Always great info and resources.

  15. Hi, great template. Recently started leaning JS wanted to know how u set the height of the header.

  18. For me on Chrome the logo is far too big and the website fails….
    Any suggestions what might be wrong here?

    • Hi Mr Huy,
      Go to the js/main.js file and look in the $(window).load function.

      Inside you will find all the initializations for all the sliders.

      Find the one you want and insert the option “autoPlay:3000” for example.. that would be 3000 milliseconds or 3 seconds.

      Don’t forget to add a comma to separate this option from all the others. For further details look in the OWL documentation http://owlgraphic.com/owlcarousel/

      Best Regards,
      Filip, Front-end Developer at PHIr

  23. Very clean work 😉
    Please can you let me know where did you find the template pictures ?
    Thanks, Mehdi.

  24. Your template is very nice! I use its structure and javascript for my website. I change some things in the contact form. I use PHP to check the form, but I have a problem with the header’s height when the form has been submitted. The header become very height (it’s due to jquery.min.1.11.1). Does someone use without problems this contact form?

  25. How do you make use of the sign up for ? id like to use as a contact form that mails me the details, i have edited it but how can i make it work? thanks

  26. Is this on Github anywhere, if not could you please put it there with a link? 🙂

    Thanks!

  27. First of all, awesome work. Absoulety loved it. I wish I had seen this earlier when I was making a one pager website. I got two questions for you. When I scroll a bit after page loading, the background of the navbar gets white, can you please tell me how to do that?
    Another question. When I scroll down it points to that section by changing the items of menu, how to do that?
    I would really appreciate if you can take some time out to help me on this.
    Thanks in advance.

  29. Hi there, Excellent Work just loved it. I have been working to make use of this template but facing some difficulties. For the rest of the pages other than the home page, I don’t need the blue background but I do need the header part but so far I was unable to shorten the blue coloured header. can you please help me?
    thanks.

  30. Design look great! i’m looking for web hosting template in similar design..

  31. Oh boy! What a blast of fresh air! The design and flow of this project is top notch, the colours so relaxing, the divs so crisp and sharp! You guys are truly magical. Inspirational work, this. Please watch out for my follow on twitter!

  32. Firstly, Great Job!
    I’m using this Template. But i’m having problem with preloader.
    Its taking a lot of time to load my site, almost 20-25 sec. How can I reduce this time to speed up my sites loading time?

  34. Hi PHI RHYTHMUS,

    First of All Awesome work. Can you tell me from where I can get PNG icons you used in the Services Section? I mean a Whole Pack

  37. Really nice template. Is it possible to use the Typewriter effect on the Boxify template ??
    Cheers, and all the best.

  38. hi guys, thanks so much. it would be lovely if you can add a contact form on the cardio project

  40. The toggle nave (on mobile device) does not work in FireFox when scrolled down some. It works when positioned at the very top, but when the original nav hides when scrolled down and replaced with the white nav, the toggle menu does not work. How can I get this to work? I do not need the flashy mobile menu that works in Chrome, just any working mobile nav menu.

    Everything else is awesome, but I cannot use if I can’t get the mobile menu to work in all browsers.

    • Yeap, same issue here. Menu doesn’t really work in Firefox and I assume in Safari also, but I didn’t tested it there. Just, a hunch 🙂

  41. Great template thanks very much.
    I may be just being thick here but how to I edit the .less files?
    When I inspect the website it says they are in a less folder in the css folder but nothing is there?
    Just need to make a few changes to the nav bar.
    Thanks very much

    • You have two options. First, you may want to convert LESS into usual CSS. There are several online tools to do so. For example, you can use this one: http://less2css.org. The second option is to learn LESS syntax. If you are planning to work a lot with website designs then you may consider learning CSS compilers such as LESS. Anyway good luck!

    • @Anu
      the problem I have is: locating the less files! I cant seam to find it in the CSS folder.